<template>
  <div class="app-container">
    <div style="width: 1024px;margin: 0 auto">
    <el-form ref="submitParams" :model="submitParams" :rules="rules" label-width="120px">
      <el-row>
        <el-col  :span="24">
          <el-form-item label="合同号码" prop="contractNo">
            <el-input v-model="submitParams.contractNo" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col   :span="12">
          <el-form-item label="合同类型" prop="contractType">
            <el-select
              v-model="submitParams.contractType"
              clearable
              placeholder="合同类型"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dictMap.CONTRACT_TYPE"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col  :span="12">
          <el-form-item label="付款人开户行行号" prop="payerAccBrno">
            <el-input v-model="submitParams.payerAccBrno" @change="checkbankcode('payerAccBrno')"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="20px">
            <el-button
              icon="el-icon-search"
              plain
              type="primary"
              @click="openBankBranchDialog('payerAccBrno')"
            >
              行名行号查询
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col  :span="24">
          <el-form-item label="付款人开户行行名" prop="payerAccBrname">
            <el-input v-model="submitParams.payerAccBrname" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col  :span="12">
          <el-form-item label="付款人账号" prop="payerActno">
            <el-input v-model="submitParams.payerActno" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="付款人名称" prop="payerName">
            <el-input v-model="submitParams.payerName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col  :span="12">
          <el-form-item label="收款人开户行行号" prop="payeeAccBrno">
            <el-input v-model="submitParams.payeeAccBrno" :disabled="true"/>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col  :span="24">
          <el-form-item label="收款人开户行行名" prop="payeeAccBrname">
            <el-input v-model="submitParams.payeeAccBrname" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col  :span="12">
          <el-form-item label="收款人账号" prop="payeeActno">
            <el-input v-model="submitParams.payeeActno"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="收款人户名" prop="payeeName">
            <el-input v-model="submitParams.payeeName"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col  :span="12">
          <el-form-item label="交易币种" prop="curcd">
            <el-input v-model="submitParams.curcd" :disabled="true"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="交易金额上限" prop="amount">
            <ht-amount-input
              v-model="submitParams.amount"
              placeholder="交易金额上限"
            ></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col  :span="12">
          <el-form-item label="生效日期" prop="effDate">
            <el-date-picker v-model="submitParams.effDate" style="width: 100%;" type="date" value-format="yyyyMMdd" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="失效日期" prop="invDate">
            <el-date-picker v-model="submitParams.invDate" style="width: 100%;" type="date" value-format="yyyyMMdd" />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col  :span="24">
          <el-form-item label="附言" prop="remarks">
            <el-input type="textarea" v-model="submitParams.remarks" maxlength="128" show-word-limit/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :offset="9" :span="24">
          <el-form-item>
            <el-button type="primary" @click="submitForm" v-loading.fullscreen.lock="loading">提 交</el-button>
            <el-button @click="refresh">重 置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>
  </div>
  </div>
</template>

<script>
import { listPageMixin } from "@/libs/listPageMixin";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import { getBankInfByBankCode } from "@/api/cnaps/common/bankInfo";
import HtAmountInput from "@/views/components/HtAmountInput";
import { regularDebitContractEntrySave } from "@/api/cnaps/beps/regularDebitContract";
import { mapGetters } from "vuex";

export default {
  name: "RegularDebitContractEntry",
  mixins: [listPageMixin],
  components: { HtAmountInput,BankBranchDialog },
  computed: {
    ...mapGetters(["name", "globalBusData"]),
  },
  created() {
    this.$set(this.submitParams,'payeeAccBrno',this.globalBusData.cnapsBrno)
    this.$set(this.submitParams,'payeeAccBrname',this.globalBusData.cnapsBrname)
  },
  watch:{
    globalBusData: {
      handler(val) {
        this.$set(this.submitParams, "payeeAccBrno", val.cnapsBrno);
        this.$set(this.submitParams, "payeeAccBrname", val.cnapsBrname);
      },
      deep: true,
      immediate: true,
    },
  },

  data() {
    return {
      // 录入参数
      submitParams: {
        contractNo:undefined,
        contractType:'1',
        payerAccBrno:undefined,
        payerAccBrname:undefined,
        payerActno:undefined,
        payerName:undefined,
        payeeAccBrno:undefined,
        payeeAccBrname:undefined,
        payeeActno:undefined,
        payeeName:undefined,
        curcd:'CNY',
        amount:undefined,
        effDate:undefined,
        invDate:undefined,
        remarks:undefined
      },

      loading: false,
      //
      searchFormDictList: ["CONTRACT_TYPE"],

      rules: {
        contractNo:[ { required: true, message: "请输入合同号码", trigger: "blur" },{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        contractType : [ { required: true, message: "请输入合同类型", trigger: "blur" }],
        payerAccBrno : [ { required: true, message: "请输入付款人开户行行号", trigger: ['blur', 'change'] },{ max: 14, message: "长度最大为14位", trigger: "blur" }],
        payerAccBrname : [ { required: true, message: "请输入付款人开户行行名", trigger: "blur" },{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        payerActno : [ { required: true, message: "请输入付款人账号", trigger: "blur" },{ max: 32, message: "长度最大为32位", trigger: "blur" }],
        payerName : [ { required: true, message: "请输入付款人户名", trigger: "blur" },{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        payeeAccBrno : [ { max: 14, message: "长度最大为14位", trigger: "blur" }],
        payeeAccBrname : [ { max: 60, message: "长度最大为60位", trigger: "blur" }],
        payeeActno : [ { required: true, message: "请输入收款人账号", trigger: "blur" },{ max:32, message: "长度最大为32位", trigger: "blur" }],
        payeeName : [ { required: true, message: "请输入payeeName", trigger: "blur" },{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        curcd : [ { required: true, message: "请输入交易币种", trigger: "blur" },{ max: 3, message: "长度最大为3位", trigger: "blur" }],
        amount : [{ required: true, message: "请输入交易金额上限", trigger: "blur" }],
        effDate : [{ required: true, message: "请输入生效日期", trigger: "blur" }],
        invDate : [{ required: true, message: "请输入失效日期", trigger: "blur" }],
        remarks : [ { max: 128, message: "长度最大为128位", trigger: "blur" }],

      },
    };
  },
  mounted() {},
  methods: {
    //行名行号返回
    confirmBankBranch(fromFlag, row) {
      if (fromFlag === "payerAccBrno") {
        this.$set(this.submitParams, "payerAccBrno", row.bankCode);
        this.$set(this.submitParams, "payerAccBrname", row.orgFullname);
      }
    },
    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.bankBranchDialog.show(fromFlag);
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          this.loading = true;
          regularDebitContractEntrySave(this.submitParams)
            .then((response) => {
              this.msgSuccess("录入成功");
              this.refresh();
              this.loading = false;
            })
            .catch((err) => {
              this.loading = false;
            });
        }
      });
    },
    //点击重置按钮
    refresh() {
      this.resetForm("submitParams");
      console.log(this.globalBusData)
    },

    checkbankcode(fromFlag) {
      if (fromFlag === "payerAccBrno") {
        let payerAccBrno = this.submitParams.payerAccBrno;
        getBankInfByBankCode(payerAccBrno)
          .then((response) => {
            if (response.code == "S" && response.result !== null && response.result !== undefined) {
              this.$set(this.submitParams, "payerAccBrno", response.result.bankCode);
              this.$set(this.submitParams, "payerAccBrname", response.result.orgFullname);
            } else {
              this.msgError("无行名行号记录");
              this.$set(this.submitParams, "payerAccBrno", null);
              this.$set(this.submitParams, "payerAccBrname", null);
            }
          })
          .catch((err) => {
            this.$set(this.submitParams, "payerAccBrno", null);
            this.$set(this.submitParams, "payerAccBrname", null);
          });
      }
    },

  },
};
</script>
